<template>
	<view class="normal-login-container">
		<view class="login-bg">
			<image class="login-content-bg" src="/static/images/icon-login-bg.png" mode="widthFix"></image>
		</view>
		<view class="logo-content">
			<image class="icon-logo" :src="globalConfig.appInfo.logo" mode="widthFix"></image>
			<view class="title">智慧街道网格员</view>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<image class="input-icon" src="/static/images/icon/icon-phone.png" mode="widthFix"></image>
				<input v-model="loginForm.phone" type="number"  maxlength="11" class="input"  placeholder="请输入手机号码" />
			</view>
			<view class="input-item flex align-center">
				<image class="input-icon" src="/static/images/icon/icon-password.png" mode="widthFix"></image>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码"
					maxlength="20" />
				<!-- 				<view :class="codeVisible ? ['code'] : ['code', 'codeDisable'] " @click="getCode">
					{{codeVisible? '获取验证码' : ` 获取验证码(${codeTime})`}}
				</view> -->
			</view>
			<!-- 			<Verify @success="pwdLogin" :mode="'pop'" :captchaType="'blockPuzzle'"
				:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify> -->
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg">登录</button>
			</view>
		</view>

		<view class="xieyi text-center" style="display: flex; align-items: center; justify-content: center;">
			<u-checkbox-group style="text-align: center;">
				<u-checkbox value="checked" size="14" @change="checkboxChange" />
				<text class="text-grey1">已阅读并同意</text>
				<text @click="handleUserAgrement" class="text-blue">《用户服务协议》</text>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	// import Verify from "@/components/verifition/Verify"
	import {
		getAccessToken
	} from '@/utils/auth'
	export default {
		name: 'Login',
		// components: {
		// 	Verify
		// },
		data() {
			return {
				checked: false,
				captchaEnabled: false, // 验证码开关 TODO 芋艿：需要抽到配置里
				globalConfig: getApp().globalData.config,
				loginForm: {
					phone: '',
					password: '',
					captchaVerification: ''
				},
				codeVisible: true,
				codeTime: 60
			}
		},
		mounted() {
			if (getAccessToken()) {
				this.$tab.switchTab('/pages/home/index')
			}
		},
		methods: {
			checkboxChange(value) {
				console.log(value);
				this.checked = value
			},
			// 用户协议
			handleUserAgrement() {
				this.$tab.navigateTo(`/pages/login/agreement/index`)
			},
			// 登录方法
			async handleLogin(params) {
				const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				if (this.checked === false) {
					this.$modal.msgError('请勾选用户协议')
				} else if (this.loginForm.phone === '') {
					this.$modal.msgError('请输入您手机号')
				} else if (!reg.test(this.loginForm.phone)) {
					this.$modal.showToast('请输入您正确的手机号')
				} else if (this.loginForm.password === '') {
					this.$modal.msgError('请输入您的密码')
				} else {
					// 显示验证码
					if (this.captchaEnabled) {
						this.$refs.verify.show()
					} else {
						// 直接登录
						await this.pwdLogin({})
					}
				}
			},
			// 获取验证码
			getCode() {
				if (!this.codeVisible) return
				this.codeVisible = false
				this.codeTime = 60
				const timeClock = setInterval(() => {
					this.codeTime--
					if (this.codeTime == 0) {
						clearInterval(timeClock)
						this.codeVisible = true
					}
				}, 1000)
			},
			// 密码登录
			async pwdLogin(captchaParams) {
				// this.$modal.loading("登录中，请耐心等待...")
				// 执行登录
				this.loginForm.captchaVerification = captchaParams.captchaVerification
				this.$store.dispatch('Login', this.loginForm).then(() => {
					// this.$modal.closeLoading()
					this.loginSuccess()
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				// this.$store.dispatch('GetUserInfo').then(res => {
				this.$tab.reLaunch('/pages/home/index')
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;

		.normal-login-container {
			width: 100%;

			.login-bg {
				width: 100vw;
				height: 610rpx;
				opacity: 1;
				background: linear-gradient(179deg, #3878f9 0%, #74aafc 99%);
				position: absolute;
				top: 0;
				z-index: -1;

				.login-content-bg {
					width: 100vw;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.logo-content {
				width: 100%;
				font-size: 21px;
				text-align: center;
				padding-top: 60rpx;

				.icon-logo {
					width: 240rpx;
					height: 240rpx;
				}

				.title {
					margin-left: 10px;
					font-size: 40rpx;
					color: #fff;
				}
			}

			.login-form-content {
				text-align: center;
				padding: 60rpx;

				.input-item {
					margin: 20px auto;
					height: 45px;
					border-bottom: 2rpx solid #bfc0c7;

					.input-icon {
						margin-left: 20rpx;
						width: 32rpx;
					}

					.input {
						width: 100%;
						font-size: 14px;
						line-height: 20px;
						text-align: left;
						padding-left: 15px;
					}

					.code {
						width: 310rpx;
						margin: 0 10rpx;
						color: #0081ff;
						font-size: 24rpx;
					}

					.codeDisable {
						opacity: 0.5;
					}
				}

				.login-btn {
					margin-top: 40px;
					height: 45px;
				}

				.xieyi {
					color: #333;

					margin-top: 20px;
				}

			}

			.easyinput {
				width: 100%;
			}
		}

		.login-code-img {
			height: 45px;
		}

		v-deep .text-align {
			margin-left: 100px !important;
		}

		;
	}
</style>